<template>
	<view class="publishProduct">
		<u-form :model="form" ref="form1" class="formBox">
			<view v-for="(item,index) in list" :key='index' class="formBox1 formImg mt20">
				<view class="c3d f32 fb">
					运费数据
				</view>
				<view class="">
					<u-form-item label=" ">
						<view class="f28 c3d wsn">
							配送区域 <text class="error ml8">*</text>
						</view>
						<view class="flex1">
							<view class="ml24">
								<u-input v-model="item.citysName" type="select" @click="btnInputSelect('psqy',index)"
									placeholder="请选择配送区域" />
							</view>
						</view>

					</u-form-item>
					<view class="provinceNameBox">
						<view class="flex flex_warp" v-for="(item,indx2) in item.provinceName" :key="indx2">
							{{item.name}}(
							<view class="nameTitle" v-for="(item1,indx3) in item.nameCity" :key="indx3">
								{{item1.name}},
							</view>
							)
						</view>
					</view>
					<u-form-item label=" ">
						<view class="f28 c3d wsn">
							{{listTitle.name1}} <text class="error ml8">*</text>
						</view>
						<view class="flex1">
							<view class="ml24">
								<u-input v-model="item.first" :placeholder="'请输入' + listTitle.name1" />
							</view>
						</view>
						<view class="">
							{{listTitle.unit1}}
						</view>
					</u-form-item>
					<u-form-item label=" ">
						<view class="f28 c3d wsn">
							{{listTitle.name2}} <text class="error ml8">*</text>
						</view>
						<view class="flex1">
							<view class="ml24">
								<u-input v-model="item.first_fee" :placeholder="'请输入' + listTitle.name2" />
							</view>
						</view>
						<view class="">
							{{listTitle.unit2}}
						</view>
					</u-form-item>
					<u-form-item label=" ">
						<view class="f28 c3d wsn">
							{{listTitle.name3}} <text class="error ml8">*</text>
						</view>
						<view class="flex1">
							<view class="ml24">
								<u-input v-model="item.additional" :placeholder="'请输入' + listTitle.name3" />
							</view>
						</view>
						<view class="">
							{{listTitle.unit3}}
						</view>
					</u-form-item>
					<u-form-item label=" ">
						<view class="f28 c3d wsn">
							{{listTitle.name4}} <text class="error ml8">*</text>
						</view>
						<view class="flex1">
							<view class="ml24">
								<u-input v-model="item.additional_fee" :placeholder="'请输入' + listTitle.name4" />
							</view>
						</view>
						<view class="">
							{{listTitle.unit4}}
						</view>
					</u-form-item>
					<!-- <view @click="btnDelete(item,index)" class="mt12 tar primary">
						删除
					</view> -->
				</view>
			</view>
			<!-- <view class="flexRight pb32" v-if="form.radio==0">
				<view class="sqpp" @click="btns('add')">
					添加运费数据
				</view>
			</view> -->
			<view class=" formBox1 mt20">
				<view class="">
					秒送
				</view>
				<u-form-item label=" ">
					<view class="f28 c3d wsn">
						运费 <text class="error ml8">*</text>
					</view>
					<view class="flex1">
						<view class="ml24">
							<u-input v-model="list[0].flash_send_fee" type="digit" placeholder="请输入价格" />
						</view>
					</view>
				</u-form-item>
			</view>
		</u-form>
		<u-select child-name='childlist' :mode='selectList.mode' value-name='id' label-name='name'
			v-model="selectList.show" :list="selectList.list" @confirm="onSelect"></u-select>
		<!-- 地图选择 -->
		<u-popup v-model="areaShow" v-if="areaShow" mode="bottom" border-radius="28" height='80%'>
			<view class="areaBox">
				<u-collapse>
					<u-checkbox-group>
						<u-collapse-item v-for="(item, index) in areaData" :key="index">
							<template v-slot:title>
								<view class="titleCheckbox">
									<u-checkbox @change="checkboxGroupChange0($event,index,item)" v-model="item.checked"
										:name="item.id">
										{{item.name}}
									</u-checkbox>
								</view>
							</template>
							<view class="areaBox1">
								<u-checkbox-group>
									<view v-for="(item1,index1) in item.city" :key="index1">
										<u-checkbox @change="checkboxGroupChange1($event,index,index1,item1)"
											:name="item1.id" v-model="item1.checked">{{item1.name}}</u-checkbox>
									</view>
								</u-checkbox-group>
							</view>
						</u-collapse-item>
					</u-checkbox-group>
				</u-collapse>
			</view>
		</u-popup>
		<view class="btnSub mt20">
			<button class="btn" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					first: '',
					first_fee: '',
					additional: '',
					additional_fee: '',
					name: '',
					province: [],
					citys: [],
					provinceName: [],
					citysName: '',
				}],
				listTitle: {
					name1: '首距离',
					name2: '运费',
					name3: '续距离',
					name4: '续费',
					unit1: '千米',
					unit2: '元',
					unit3: '千米',
					unit4: '元',
				},
				// 筛选数组数据
				selectList: {
					// "single-column"-单列模式，"mutil-column"-多列模式，"mutil-column-auto"-多列联动模式
					mode: '',
					selectIndex: '',
					list: [{

					}],
					current1: {
						label: ''
					},

					show: false,
				},
				// 表单数据
				form: {
					name: '',
					radio: '0',
					radio1: '0',
					select1: '',
					select2: '',

					text: '',
					flash_send_fee: '',
				},
				// 校验
				rules: {
					name: [{
						required: true,
						message: '请填写商品标题',
						trigger: ['change', 'blur'],
					}],
					select1: [{
						required: true,
						message: '请选择商品类目',
					}],

					img1: [{
						required: true,
						message: '请上传商品主图',
						trigger: ['change', 'blur'],
					}],
					text: [{
						required: true,
						message: '请输入商品描述',
						trigger: ['change', 'blur'],
					}],

				},
				// 上传图片
				uploadurl: null,
				multipart: null,
				clearIcon: 'https://img.aibbyp.com/wechat/images/nHome/close.png',
				selectfile: 'https://img.aibbyp.com/wechat/images/nHome/tpsc.png',

				areaData: [],
				areaShow: false,
				areaIndex: 0,
			}
		},

		onLoad() {
			this.getlist()
			this.getDeliveryList()
		},
		onShow() {

		},
		onReady() {
			this.$refs.form1.setRules(this.rules);
		},
		methods: {
			getlist() {
				this.$api.post({
					url: '/store.Logistics/getSendHome',
					success: res => {
						console.log(res);
						this.list[0].first = res.first
						this.list[0].first_fee = res.first_fee
						this.list[0].additional = res.additional
						this.list[0].additional_fee = res.additional_fee
						this.list[0].flash_send_fee = res.flash_send_fee
						this.list[0].citys = res.send_citys.map(Number)
						this.list[0].province = res.send_province.map(Number)
						if (this.list[0].citys.length != 0) {
							this.list[0].citysName = '已选择'
						}
						this.getArea()
					}
				})
			},

			// 提交信息
			submit() {

				let data
				console.log(this.list);
				this.list.forEach(a => {
					data = {
						send_province: a.province.toString(),
						send_citys: a.citys.toString(),
						first: a.first,
						first_fee: a.first_fee,
						additional: a.additional,
						additional_fee: a.additional_fee,
						flash_send_fee: a.flash_send_fee,
						open_send: 1,
					}
				})
				console.log(data);
				// 校验数信息是否填写完整
				for (let item in data) {
					console.log(item);
					if (data[item] == '' || data[item] == null || data[item] == undefined) {
						uni.showToast({
							title: '请完整输入运费数据',
							icon: 'none'
						})
						return
					}
				}
				console.log(data);
				uni.showLoading({
					title: '提交中...'
				})
				this.$api.post({
					url: '/store.Logistics/editSendHome',
					data: data,
					success: res => {
						uni.hideLoading()
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					},
					fail: error => {
						uni.hideLoading()
					}

				})


			},
			// 多选 父级 i:选中的数据源{name: 1，value: true} k:areaData索引的
			// l ：item 
			checkboxGroupChange0(i, k, l) {
				let arrid = this.areaData.map(a => a.id)
				let index = arrid.indexOf(i)

				if (i.value) {
					this.list[this.areaIndex].province.push(i.name)
					// 选中省以后 选中下面所有的市 
					this.areaData[k].city.forEach(a => {
						this.list[this.areaIndex].citys.push(a.id)
						a.checked = true
					})
				} else {
					// 删除省id
					let index = this.list[this.areaIndex].province.indexOf(i.name)
					this.list[this.areaIndex].province.splice(index, 1)

					let arrCitys = this.list[this.areaIndex].citys
					// 删除这个省下面的所有的市
					for (let j in this.areaData[k].city) {
						this.areaData[k].city[j].checked = false
						for (let u in arrCitys) {
							if (this.areaData[k].city[j].id == arrCitys[u]) {
								arrCitys.splice(u, 1)
							}
						}
					}
					this.list[this.areaIndex].citys = arrCitys
				}
				if (this.list[this.areaIndex].province.length == 0) {
					this.list[this.areaIndex].provinceName = []
				} else {
					this.getCityName()
				}
				console.log('选中的省：', this.list[this.areaIndex].province);
				console.log('选中的市：', this.list[this.areaIndex].citys);

			},
			// 多选 子级
			checkboxGroupChange1(i, k, s, l) {
				// 选中的所有省级id
				let province = this.list[this.areaIndex].province
				// 当前选中的省级id
				let id = this.areaData[k].id
				// 选中的所有市级id
				let arrid = this.areaData[k].city.map(a => a.id)
				// 获取子id数据
				if (i.value) {
					this.list[this.areaIndex].citys.push(i.name)
					// 如果父级没有选 反选
					if (province.indexOf(id) == -1) {
						this.list[this.areaIndex].province.push(this.areaData[k].id)
						this.areaData[k].checked = true
					}
				} else {
					let index = this.list[this.areaIndex].citys.indexOf(i.name)
					this.list[this.areaIndex].citys.splice(index, 1)
					// 查找父id 如果没有加进去
					let idt
					for (let n of arrid) {
						let nid = this.list[this.areaIndex].citys.indexOf(n)
						console.log(n, nid, this.list[this.areaIndex].citys);
						if (nid == -1) {
							idt = false
						} else {
							// 还有子集
							idt = true
							break
						}
					}
					// 如果子集 里面一个都没有了 删除省级
					if (idt == false) {
						province.splice(province.indexOf(id), 1)
						this.areaData[k].checked = false
					}

				}

				console.log('选中的省111：', this.list[this.areaIndex].province);
				console.log('选中的市111：', this.list[this.areaIndex].citys);
				if (this.list[this.areaIndex].province.length == 0) {
					this.list[this.areaIndex].provinceName = []
				} else {
					this.getCityName()
				}
			},
			// 根据城市 返回城市名字
			getCityName() {
				console.log('反选 城市名字');
				this.list[this.areaIndex].provinceName = []
				this.areaData.forEach((a, k) => {
					for (let b of this.list[this.areaIndex].province) {
						let names = this.list[this.areaIndex].provinceName // ['xxx','xxx']
						if (a.id == b) {
							let names11 = {
								name: a.name,
								id: a.id,
								nameCity: [],
							}
							a.city.forEach((a1, k1) => {
								for (let b1 of this.list[this.areaIndex].citys) {
									if (a1.id == b1) {
										names11.nameCity.push({
											name: a1.name,
											id: a1.id
										})
									}
								}
							})
							names.push(names11)
						}

					}
				})
				this.list[this.areaIndex].citysName = '已选择'
			},
			// 获取地址信息
			getArea() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$api.get({
					url: '/wanlshop/common/area',
					success: res => {
						res.forEach(a => {
							a.checked = false
						
							a.city.forEach(b => {
							
								b.checked = false
							})
						})
						this.areaData = res
						this.getCityName()
						uni.hideLoading()
					},
					fail: error => {
						uni.hideLoading()
					}
				})

			},
			// 运费数据删除
			btnDelete(i, k) {
				if (this.list.length == 1) {
					uni.showToast({
						title: '运费数据最少有一个',
						icon: 'none'
					})
					return
				} else {
					this.list.splice(k, 1)
				}
			},
			// 按钮添加
			btns(i) {
				this.list.push({
					jjfs: '',
					name: '',
					province: [],
					citys: [],
					sj: '',
					fw: '',
					xj: '',
					xf: '',
				})
			},
			// 点击输入框 显示选择框
			btnInputSelect(index, index1) {
				this.selectList.selectIndex = index

				if (index == 'psqy') {
					uni.showLoading({
						title: '加载中...'
					})
					this.areaIndex = index1
					// 删除所有已选的数据  反选当前选中的数据
					this.areaData.forEach((a, k) => {
						a.checked = false
						for (let l of this.list[this.areaIndex].province) {
							if (a.id == l) {
								a.checked = true
							}
						}
						a.city.forEach((a1, k1) => {
							a1.checked = false
							for (let l1 of this.list[this.areaIndex].citys) {
								if (a1.id == l1) {
									a1.checked = true
								}
							}
						})
					})

					setTimeout(() => {
						uni.hideLoading()
						this.areaShow = true
					}, 1000)

				}

			},
			// 确定选择
			onSelect(arr) {
				console.log(arr);
				let current = arr[0];
				if (this.selectList.selectIndex == 1) {
					this.form.select1 = current.value;
					this.selectList.current1 = current;
					return
				}

				if (this.selectList.selectIndex == 3) {
					this.form.select3 = current.value;
					this.selectList.current3 = current;
					return
				}



			},
			// 发货时间列表
			getDeliveryList() {

				this.$api.post({
					url: '/store.Logistics/deliveryList',
					success: res => {
						this.selectList.list = []
						for (let i in res) {
							this.selectList.list.push({
								name: res[i],
								id: i
							})
						}

						this.form.select1 = this.selectList.list[1].id
						this.selectList.current1.label = this.selectList.list[1].name
					},

				})
			},



		}
	}
</script>

<style lang="scss" scoped>
	.publishProduct {
		width: 100%;
		padding-bottom: 100rpx;

		.provinceNameBox {
			margin-left: 150rpx;

			.nameTitle {
				color: #2f94ff;
			}
		}

		.areaBox {
			padding: 12rpx 24rpx;

			.titleCheckbox {
				width: 640rpx;
			}

			.areaBox1 {
				padding: 0 24rpx;
			}
		}

		.formBox {
			.formBox1 {
				padding: 32rpx 32rpx;
				background: #fff;
			}

			.formImg {
				padding: 24rpx 32rpx;
			}


			::v-deep.u-form-item--left {
				display: none;
			}

			::v-deep.u-form-item--right__content__slot {
				display: flex !important;
				flex: 1;
			}

			.imgBox {
				width: 100%;
				flex-wrap: wrap;
			}

			.box-mode {
				width: 132rpx;
				height: 132rpx;
			}

			.full {
				width: 100%;
				height: 100%;

			}

			.imgs {
				border-radius: 10rpx;
				border: 1rpx dashed #ccc;
			}



			.show-box {
				position: relative;
				margin-bottom: 6rpx;
				margin-right: 6rpx;
				width: 132rpx;
				height: 132rpx;

				.delect-icon {
					height: 40rpx;
					width: 40rpx;
					position: absolute;
					right: 0rpx;
					top: -6rpx;
					z-index: 1;
				}
			}

			.flexRight {
				display: flex;
				flex-direction: row-reverse;
				margin-top: 24rpx;
				padding-right: 24rpx;

				.sqpp {
					color: #FFFFFF;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 52rpx;
					width: 180rpx;
					height: 52rpx;
					background: #3065FA;
					border-radius: 8rpx 8rpx 8rpx 8rpx;

				}
			}
		}

		.wsn {
			white-space: nowrap
		}

		.w48 {
			width: 48%;
		}

		.w200 {
			width: 200rpx;
		}

		.btnSub {
			padding-bottom: env(safe-area-inset-bottom);
			width: 100vw;
			height: 98rpx;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #fff;
			z-index: 2;

			.btn::after {
				border: none;
			}

			.btn {
				width: 600rpx;
				height: 62rpx;
				background: linear-gradient(264deg, #3065FA 0%, #3065FA 14%, #2D8DF4 99%);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
</style>